<script>
import * as echarts from 'echarts';

const option = {
  title: {
    text: '学历统计图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '居民学历统计',
      data: [],
      type: 'line',
      smooth: true
    },
    {
      name: '医生统计',
      data: ['0', '0', '0', '9','10','4' ],
      type: 'line',
      smooth: true
    },{
      name: '其他统计',
      data: ['3', '4', '6', '6','1','0' ],
      type: 'line',
      smooth: true
    },
  ],


};

const option1 = {
  title: {
    text: '居民性别统计图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // name: '',
      data: [],
      type: 'bar',
      smooth: true
    }
  ]
};

const option2 = {
  title: {
    text: '居民学历统计图',
    subtext: '比例图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      center: ['50%', '60%'],
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};


 export default {
   data() {
     return {
       user:{},

     }
   },
   mounted() {
     //柱状图
     // let barDom = document.getElementById('bar');
     // let barChart = echarts.init(barDom);
     // barChart.setOption(option1);

   },
   methods: {
     finduser(){
       var a=localStorage.getItem("user")
       this.user=JSON.parse(a)
       console.log(this.user)
     },
     //线型图
     findCount(){
       this.axios.get('http://localhost:8202/person/findCount').then(res => {
         let linetDom = document.getElementById('line');
         let lineChart = echarts.init(linetDom);
         for(let i=0;i<res.data.length;i++){
           option.xAxis.data[i]=res.data[i].name;
           option.series[0].data[i]=res.data[i].value;
         }
         lineChart.setOption(option);

       })
     },
     //柱状图
     findCount1(){
       this.axios.get('http://localhost:8202/person/findCount1').then(res => {
         let barDom = document.getElementById('bar');
         let barChart = echarts.init(barDom);
         for(let i=0;i<res.data.length;i++){
           option1.xAxis.data[i]=res.data[i].name==0?'男':'女';
           option1.series[0].data[i]=res.data[i].value;
         }
         barChart.setOption(option1);

       })
     },
     //饼图
     findCount2(){
       this.axios.get('http://localhost:8202/person/findCount').then(res => {
         //饼图
         let piaDom = document.getElementById('pia');
         let piaChart = echarts.init(piaDom)
         for(let i=0;i<res.data.length;i++){
           option2.series[0].data[i]=res.data[i];
         }
         piaChart.setOption(option2);

       })
     }


   },
   created() {
     this.finduser();
     this.findCount();
     this.findCount1();
     this.findCount2();
   }
 }
</script>

<template>
  <div style="width: 100%; padding-left: 20px; padding-right: 20px;" >
    <h1 align="left" style="padding: 20px;">早上好！{{user.name}}</h1>
    <hr>
    <div class="statistics-container">
      <div class="stat-item">
        <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/10/31/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-11-07%20162440.png" alt="" style="float: left">
        <p>居民总数量：</p>
        <h1 style="margin-top: 12px; color: #2984f8;">5</h1>
      </div>
      <div class="stat-item">
        <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/10/31/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-11-07%20163722.png" alt="" style="float: left">
        <p>签约居民数量：</p>
        <h1 style="margin-top: 12px; color: #3ed59f;">2</h1>
      </div>
      <div class="stat-item">
        <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/10/31/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-11-07%20163736.png" alt="" style="float: left">
        <p>待处理服务量：</p>
        <h1 style="margin-top: 12px; color: #f9a01b;">2</h1>
      </div>
      <div class="stat-item">
        <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/10/31/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-11-07%20163840.png" alt="" style="float: left">
        <p>已完成服务量：</p>
        <h1 style="margin-top: 12px; color: #f94144;">7</h1>
      </div>
    </div>
    <div>
      <el-row :gutter="10" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card>
            <div style="width: 100%; height: 400px;  align-items: center; justify-content: center; display: flex;" id="line"></div>
          </el-card>
        </el-col>

      </el-row>

      <el-row :gutter="10" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <div style="width: 100%; height: 400px;   align-items: center; justify-content: center; display: flex;"  id="bar"></div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <div style="width: 100%; height: 400px;   align-items: center; justify-content: center; display: flex;" id="pia"></div>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<style>
.statistics-container {
  padding: 20px;
}
.stat-item {
  width: 21%;
  height: 120px;
  padding: 30px;
  margin: 10px 20px 50px 20px;
  border-radius: 10px;
  float: left;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}
span:first-child {
  font-weight: bold;
}

</style>